<template>
	<view class="search">
		<view class="search_content">
			<view class="searchContent">
				<view class="search_lfht">
					 <image src="../../static/com.png" mode=""></image>
					  <input @click="inputName()" type="text" placeholder="请输入...." v-model="input"/>
				</view>
				<view class="searchName" v-if="!show" @click="searchName()">
					<view>搜索</view>
				</view>
			</view>
		</view>
		<view class="history">
			<view class="historyTop">
				<view class="records"><text>你的历史记录</text></view>
				<view class="history_content" v-for="(item,index) in addData" :key="index">
				      <view class="historyText">
						  <text>{{item.text}}</text>
					  </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:true,
				input:'',
				addData:[],
				items:[]
	           }
		   },
		   onLoad() {
		   	
		   },
		   methods:{
			   inputName(){
				   this.show=false
			   },
			   searchName(){
				   if(this.input==""){
					   this.show=true
				   }else{
					 this.addData.push({
						 text:this.input
					 })  
				   }
				   var title=this.input
				   uni.navigateTo({
				   	url:'../lists/index?title='+title,
				   });
			   }
		   }
   }
</script>

<style>
	.search{
		width: 100%;
		height: 100%;
	}
	.search_content{
		width: 100%;
		height: 80upx;
		border-top: 20upx solid #ECECEC;
		background:#ECECEC;
	}
	.searchContent{
		width: 80%;
		height: 60upx;
		display:block;
		background: #FFFFFF;
		align-items: center;
		margin: auto;
		border-radius: 30upx;
		display: flex;
	}
	.search_lfht{
		width: 80%;
		line-height: 100%;
		margin: auto;
		display: flex;
		justify-content: center;
	}
	.search_lfht image{
		width: 50upx;
		height: 50upx;
	}
	.searchName{
		width: 17%;
		height: 100%;
		background: #F0AD4E;
		border-radius: 0px 30upx 30upx 0px;
	}
	.history{
		width: 100%;
		background: #ECECEC;
		border-radius: 30upx 30upx 0px 0px;
		margin-top: 50upx;
		display: flex;
		flex-wrap: wrap;
	}
	.historyTop{
		width: 100%;
		background: #ECECEC;
		border-radius: 30upx 30upx 0px 0px;
		margin-top: 50upx;
		display: flex;
		flex-wrap: wrap;
	}
	.history_content{
		padding: 0px 20upx;
		height: 60upx;
		border-radius: 30upx;
		display: flex;
		background: #FFFFFF;
		justify-content: center;
		margin: 20upx 10upx;
	}
	.records{
		width: 100%;
		height: 50upx;
		display: block;
		padding: 20upx 20upx;
		font-size: 30upx;
	}
</style>
